
<template>
    <div class="container" :style="{ backgroundImage: `url(${url})` }">
        <template v-if="path == 'primary'">
            <div class="header">
                <img alt="" class="back" :src="url1" @click="goBack('/book')" />
                <!-- <span class="title" 
                    :style="{ color: titleColor(), backgroundImage: `url(${url2})` }">常用表达法</span> -->
                <div class="title-wrap">
                    <img alt="" :src="url2" />
                    <span class="title" :style="{ color: titleColor() }">常用表达法</span>
                </div>
            </div>
            <div class="content">
                <template v-if="list.length == 1">
                    <div class="card-wrap1">
                        <div class="card" v-for="(item, index) in list" @click="onClickDetail(item, index)">
                            <span v-html="item.name"></span>
                            <img src="../public/assets/expression/yuyin_tb_5_pt@2x.png" alt="">
                        </div>
                    </div>
                </template>
                <template v-else-if="list.length == 2">
                    <div class="card-wrap2">
                        <div class="card" v-for="(item, index) in list" @click="onClickDetail(item, index)">
                            <span v-html="item.name"></span>
                            <img src="../public/assets/expression/yuyin_tb_5_pt@2x.png" alt="">
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="card-wrap3">
                        <div class="card" v-for="(item, index) in list" @click="onClickDetail(item, index)">
                            <span v-html="item.name"></span>
                            <img src="../public/assets/expression/yuyin_tb_5_pt@2x.png" alt="">
                        </div>
                    </div>
                </template>
            </div>
        </template>
        <template v-else>
            <div class="header">
                <img alt="" class="back" :src="url1" @click="goBack('/book')" />
                <span class="title-middle" :style="{ color: titleColor() }">语法聚焦</span>
            </div>
            <div class="content-list">
                <div class="card " v-for="(item, index) in list" @click="onClickDetail(item, index)">
                    <span v-html="item.name"></span>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup>
import { reactive, toRefs, onMounted } from 'vue'
import { useRouter, useRoute } from "vue-router";
import { getSentenceListApi } from "../api/expression.js"

const route = useRoute();
const path = window.gradeId > 61 ? 'middle' : 'primary';

import getImageUrl from '../utils/getImagePath.js'

const router = useRouter();

function goBack(url) {
    // router.push(url); 
    router.go(-1);
}

// const list = exp;
// console.log(exp);

const state = reactive({
    list: [],
});

const { list } = toRefs(state);

const getSentenceList = async () => {
    // state.list = exp;
    try {
        const res = await getSentenceListApi();
        state.list = res.data;
    } catch (error) {
    }
}

onMounted(() => {
    getSentenceList();
});

const onClickDetail = (item,index) => {
    router.push({
        path: './expression-evaluation',
        query: {
            id: item.id,
            name: item.unit ? item.unit : `Unit ${index+1}`,
        }
    });
}

const titleColor = () => {
    if (path == 'middle') {
        return '#222'
    } else {
        return '#fff'
    }
    // switch (gradeId) {
    //     case '51':
    //         return '#fff'
    //     case '81':
    //         return '#222'
    //     default:
    //         return '#fff'
    // }
}

const url =  new URL(`../public/assets/expression/${path}/bg.png`, import.meta.url).href;
const url1 = new URL(`../public/assets/book/${path}/back.png`, import.meta.url).href;
const url2 = new URL(`../public/assets/expression/${path}/tb.png`, import.meta.url).href;

</script>


<style scoped>
.container {
    /* background-image: url("../public/assets/dc_bj_1_pt@2x.png"); */
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    /* box-sizing: border-box; */
    position: relative;
    /* display: flex;
    flex-direction: column; */
}

.header {
    height: 15%;
    position: relative;
    overflow: hidden;
    /* padding-top: 1.5%; */
    /* margin-top: 2%; */
}

.back {
    cursor: pointer;
	left: 2%;
	position: absolute;
	top: 1.5rem;
	width: 2.5rem;
    /* margin-left: 2%; */
}

.title-wrap {
    position: absolute;
    left: 50%;
	top: 1.6rem;
    transform: translateX(-50%);
}

.title-wrap img{
    height: 3.85rem;
}

.title {
    /* background-image: url('../public/assets/dc_tb_1_pt@2x.png'); */
    /* background-size: cover; */
    color: #FFFFFF;
    /* width: 16vw; */
    /* height: 4.792vw;
    line-height: 4.792vw; */
    font-size: 1.8rem;
    /* top: 4%; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 100%;
    text-align: center;
    /* height: 100%;
    line-height: 100%;
    text-align: center; */

    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%,-50%);
}

.title-middle {
    color: #FFFFFF;

    font-size: 1.8rem;
    /* width: 100%; */
    text-align: center;

    position: absolute;
    left: 50%;
	top: 3rem;
    transform: translate(-50%,-50%);
}

.content-list {
    height: 80%;
    /* flex: 1; */
    /* display: flex;
    flex-wrap: wrap;
    align-content: flex-start; */
    width: 80%;
    margin: 0 auto;
    overflow: auto;
}

.content-list .card {
    box-sizing: border-box;
    /* width: calc((100% - 18rem) / 3);
    height: calc((100vw - 18rem) / 6); */
    background-color: #FFFFFF;
    border-radius: 0.8rem;
    margin: 0 1rem 1rem 1rem;
    padding: 1rem;
    position: relative;
    /* display: flex;
    flex-direction: column; */
}

.content-list .card span {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    font-family: 'text-en';
}

/*HTML5 元素超出部分滚动, 并隐藏滚动条*/
.content-list::-webkit-scrollbar {
    display: none;
}

.content-list::-webkit-scrollbar {
    width: 0px;
}


.content {
    height: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* width: 80%; */

    /* align-items: center; */
    /* padding-top: 4rem; */
}

.card-wrap1 {
    width: 85%;
    /* margin: 0 auto; */
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    /* align-content: flex-start; */
    justify-content: center;
    align-items: center;
}
.card-wrap1 .card {
    box-sizing: border-box;
    width: calc((100% - 4rem - 1px) / 3);
    height: 12rem;
    /* width: 21rem;
    height: 12rem; */
    background-color: #FFFFFF;
    border-radius: 1rem;
    /* margin: 1rem; */
    /* margin-right: 2rem;
    margin-bottom: 2rem; */
    padding: 2rem;
    position: relative;
    display: inline-block;
    font-family: 'text-en';
}

.card-wrap2 {
    width: 85%;
    /* margin: 0 auto; */
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    /* align-content: flex-start; */
    justify-content: center;
    align-items: center;
}
.card-wrap2 .card {
    box-sizing: border-box;
    width: calc((100% - 4rem - 1px) / 3);
    height: 12rem;
    /* width: 21rem;
    height: 12rem; */
    background-color: #FFFFFF;
    border-radius: 1rem;
    /* margin: 1rem; */
    margin-left: 2rem;
    margin-right: 2rem;
    /* margin-bottom: 2rem; */
    padding: 2rem;
    position: relative;
    display: inline-block;
    font-family: 'text-en';
}

.card-wrap3 {
    width: 85%;
    /* margin: 0 auto; */
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.card-wrap3 .card {
    box-sizing: border-box;
    width: calc((100% - 4rem - 1px) / 3);
    height: 12rem;
    /* width: 21rem;
    height: 12rem; */
    background-color: #FFFFFF;
    border-radius: 1rem;
    /* margin: 1rem; */
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    position: relative;
    display: inline-block;
    font-family: 'text-en';
}

.card-wrap3 .card:nth-child(3n + 3) {
    margin-right: 0rem;
    margin-bottom: 0rem;
}

.card span {
    font-size: 1.6rem;
    /* line-height: 1.3rem; */
    font-weight: bold;
    color: #333;
}

.card img {
    width: 6rem;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

</style>